<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>gamepic-test</title>
    <meta name="author" content="Vincent Garreau" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" media="screen" href="css/effects.css">
    <style type="text/css" media="screen">
    #myCanvas {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        width: 100%;
        height: 100%;
    }
    </style>
</head>

<body>
    <!-- particles.js container -->
    <div id="particles-js">
    </div>
    <!--content start-->
    <canvas id="myCanvas" style="cursor: inherit;">
        您的浏览器不支持canvas！
    </canvas>
    <!-- scripts -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="../particles.js"></script>
    <script src="js/effects.js"></script>
    <script type="text/javascript">
    window.onload = function() {
        // canvas设置宽高
        window.addEventListener("myCanvas", resizeCanvas, false);

        function resizeCanvas() {
            w = canvas.width = document.body.clientWidth;
            h = canvas.height = document.body.clientHeight;
            console.log(h)
        }

        var canvas = document.getElementById('myCanvas'); //获取canvas元素
        canvas.width = document.body.clientWidth;
        canvas.height = document.body.clientHeight;
        var ctx = canvas.getContext('2d'), //获取画图环境，指明为2d
            centerX = canvas.width / 2, //Canvas中心点x轴坐标
            centerY = canvas.height / 2, //Canvas中心点y轴坐标
            rad = Math.PI * 2 / 9, //将360度分成100份，那么每一份就是rad度
            trad = rad * Math.PI / 180; //对应的弧度

        //绘制白色中心圆
        function whiteCircle() {
            ctx.save();
            ctx.beginPath();
            ctx.strokeStyle = "white";
            ctx.lineWidth = 1; //设置线宽
            ctx.arc(centerX, centerY, 100, 0, Math.PI * 2, false);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
        whiteCircle();

        //绘制
        function draw() {
            var canvas = document.getElementById('myCanvas');
            if (canvas == null)
                return false;
            var ctx = canvas.getContext("2d");
            var dx = canvas.width / 2; //中心点横坐标
            var dy = canvas.height / 2; //中心点纵坐标
            var r = 100; //半径

            //绘制发散的线条
            ctx.beginPath();
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI * 2 / 9; //角度,整个圆分为9份
            for (var i = 0; i < 9; i++) {
                var x = Math.sin(i * dig);
                var y = Math.cos(i * dig);
                var endX = dx + x * (r + 180); //绘制终点x坐标
                var endY = dy + y * (r + 180); //绘制终点y轴坐标
                ctx.moveTo(dx + x * r, dy + y * r); //设置路径起点
                ctx.lineTo(endX, endY); //设置线条终点
                ctx.stroke();
                ctx.strokeStyle = "#fff"; // 设置线的颜色
                ctx.closePath();

                    //开始绘制外圈小圆
                    ctx.moveTo(endX, endY);
                    ctx.beginPath();
                    ctx.arc(dx + x * (r + 180 + 35), dy + y * (r + 180 + 35), 35, 0, Math.PI * 2, true);
                    ctx.strokeStyle = "#fff"; // 设置线的颜色
                    ctx.stroke();
                    ctx.closePath();

                }
                ctx.strokeStyle = "#fff"; // 设置线的颜色
                ctx.closePath();
                ctx.stroke();
            }

            draw();
            
        // 画直线动画
                var canvas = document.getElementById("myCanvas");
                if (canvas && canvas.getContext) {
                    var context = canvas.getContext("2d");
                    if (context) {
                        Line(context, {
                            x: 500,
                            y: 500
                        }, {
                            x: 100,
                            y: 100
                        });
                    }
                }
                var animating = null;

                function Line(context, from, to) {
                    animating && clearTimeout(animating);
                    context.save();
                    LineAnim();

                    var t = 0,
                        b = 0,
                        c = Math.max(to.x - from.x, to.y - from.y),
                        d = 20; //动画时间

                    function LineAnim() {
                        if (t > d) {
                            clearTimeout(animating);
                            animating = null;
                            context.restore();
                            console.log("done...");
                        } else {
                            var x = from.x + (c * t / d + b),
                                y = from.y + (c * t / d + b);
                            context.beginPath();
                            context.clearRect(0, 0, canvas.width, canvas.height);
                            context.moveTo(from.x, from.y);
                            context.lineTo(x, y);
                            context.closePath();
                            context.stroke();
                            t++;
                            animating = setTimeout(arguments.callee, 40);
                        }
                    }
                }
    }



    </script>
</body>

</html>
